<template>
  <view style="display: flex; flex-direction: column; margin-top: 10rpx; background-color: white">
    <view class="sort" v-if="props.needSort">
      <view class="sort_item" @click="sortChange(0)" :style="{ fontWeight: orderType == 0 ? '700' : '400' }">综合</view>
      <view class="sort_item" @click="sortChange(1)" :style="{ fontWeight: orderType == 1 || orderType == 2 ? '670000' : '400' }">
        价格
        <view class="sort_trangle">
          <div class="trangle_up" :style="{ borderBottom: orderType == 1 ? ' 5px solid #000' : ' 5px solid #ccc' }"></div>
          <div class="trangle_down" :style="{ borderTop: orderType == 2 ? ' 5px solid #000' : ' 5px solid #ccc' }"></div>
        </view>
      </view>
      <view class="sort_item" @click="sortChange(2)" :style="{ fontWeight: orderType == 3 || orderType == 4 ? '700' : '400' }">
        销量
        <view class="sort_trangle">
          <div class="trangle_up" :style="{ borderBottom: orderType == 3 ? ' 5px solid #000' : ' 5px solid #ccc' }"></div>
          <div class="trangle_down" :style="{ borderTop: orderType == 4 ? ' 5px solid #000' : ' 5px solid #ccc' }"></div>
        </view>
      </view>
    </view>

    <!-- <scroll-view
      @refresherrefresh="onPulling"
      style="height: 100%"
      class="dialogue-box"
      :refresher-enabled="true"
      :refresher-triggered="triggered"
      :scroll-y="true"
      @scrolltolower="scrolltolower"
    > -->
    <view class="product">
      <view class="product-item" v-for="item in props.data" :key="item.id" @click="goDetail(item)" v-if="props.data.length > 0">
        <div class="image">
          <image width="100%" height="100%" :src="item.mainImage" mode="aspectFill"></image>

          <div class="info">
            <p class="name">{{ item.name }}</p>
            <p>
              <span class="price_final"><text style="font-size: 24rpx">￥</text>{{ item.presentPrice }}</span>
              <span class="price"><text style="font-size: 24rpx">￥</text>{{ item.originalPrice }}</span>
            </p>
          </div>
        </div>
      </view>
      <view v-else style="width: 100vw">
        <u-empty mode="search" marginTop="100"> </u-empty>
      </view>
    </view>

    <view v-if="!showNoMore" class="no_more">下拉加载更多</view>
    <view v-else class="no_more">没有更多数据了</view>

    <!-- </scroll-view> -->
  </view>
</template>

<script setup lang="ts">
import { computed, ref, onMounted, onBeforeMount, watch } from "vue";
import { getGoodsList } from "@/utils/api";

const props = defineProps({
  // 列表内容
  data: {
    type: Object,
    default: () => {},
  },
  className: {
    type: Object,
    default: () => {},
  },
  needSort: {
    type: Boolean,
    default: () => false,
  },
  triggered: {
    type: Boolean,
    default: () => true,
  },
  showNoMore: {
    type: Boolean,
    default: () => false,
  },
});

const options = computed(() => {
  return props.data.options;
});

onBeforeMount(() => {});

const line = computed(() => {
  return options.volumeStr && this.options.goodRatio ? "| " : "";
});

function goDetail(item) {
  uni.navigateTo({
    url: "/pages/goodsDetail/index?id=" + item.id,
  });
}

const orderType = ref(0);
const emit = defineEmits(["sortChange", "scrolltolower", "onPulling"]);
function sortChange(sort) {
  if (sort == 0) {
    orderType.value = 0;
  }
  if (sort == 1) {
    if (orderType.value == 1) {
      orderType.value = 2;
    } else {
      orderType.value = 1;
    }
  }
  if (sort == 2) {
    if (orderType.value == 3) {
      orderType.value = 4;
    } else {
      orderType.value = 3;
    }
  }
  emit("sortChange", orderType.value);
}
</script>

<style lang="scss" scoped>
$pzvw: 50vw;
$pz30: 30px;

.product {
  width: 100vw;
  // height: 100vh;
  display: flex;
  flex-wrap: wrap;
  // overflow: scroll;
  // padding-bottom: 100rpx;
}

.product-item {
  width: calc(50vw - 15px);
  margin-left: 10px;
  margin-bottom: 20rpx;
  image {
    width: calc(50vw - 15px);
    height: calc(50vw - 15px);
  }
}

.image {
  width: 100%;
  height: 100%;
}

.info {
  padding: 10rpx 5rpx 0;

  .name {
    font-size: 26rpx;
    font-weight: 600;
    margin: 0;
    color: #333;
    text-overflow: ellipsis;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .num {
    font-size: 12rpx;
    color: #d23000;
    // font-weight: 600;
  }

  .price_final {
    font-weight: 400;
    font-size: 40rpx;
    color: red;
  }

  .price {
    color: #b5b5b5;
    font-weight: 400;
    font-size: 26rpx;
    margin-left: 4px;
    text-decoration: line-through;
  }
}

.sort {
  width: 100vw;
  height: 80rpx;
  display: flex;
}

.sort_item {
  width: 33vw;
  height: 100%;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.sort_trangle {
  display: flex;
  flex-direction: column;
  width: 30rpx;
  justify-content: center;
  align-items: center;
}
.trangle_up {
  width: 0px;
  height: 0px;
  // border-bottom: 5px solid #ccc;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  margin-bottom: 10rpx;
}

.trangle_down {
  width: 0px;
  height: 0px;
  // border-top: 5px solid #ccc;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}

.no_more {
  width: 100vw;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  color: #ccc;
  margin-bottom: 20rpx;
}
</style>
